<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart1,
		#chart2 {
			width: 1000px;
			height: 800px;
			float: left;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart1"></div>
	<div id="chart2" style="float: right"></div>
	<script>
		var myChart1 = echarts.init(document.getElementById('chart1'));

		//柱状图
		myChart1.setOption({
			title: {
				text: '当月销售业绩',
			},
			legend: {	//图例组件
				//show:true,
				data: ['今日销量', '昨日销量', {
					name: '明日销量',
					icon: 'image://',
					textStyle: {
						//float:'left',
					}
				}],
				type: 'plain',
				left: 'right',
				orient: 'horizontal',
				padding: [10, 20],
				itemGap: 20,
				itemWidth: 35,
				itemHeight: 24,
				formatter: '{name} 高么？',
				formatter: function (name) {
					return "你说 " + name + " 高么？";
				},
				selectedMode: 'multiple',
				inactiveColor: '#ccc',
				selected: {
					'今日销量': true,
					'昨日销量': true,
					'明日销量': true,
				},
				textStyle: {
					color: '#f00'
				},

				backgroundColor: 'gray',
			},
			/* tooltip:{
			}, */
			xAxis: {
				data: ['衬衫', '羊毛衫', "雪纺衫", "裤子", "高跟鞋", "袜子"]
			},
			yAxis: {

			},
			series: [
				{
					name: '今日销量',
					type: 'bar',
					data: [5, 20, 36, 10, 19, 24]
				},
				{
					name: '昨日销量',
					type: 'bar',
					data: [5, 20, 36, 10, 19, 24]
				},
				{
					name: '明日销量',
					type: 'bar',
					data: [5, 20, 36, 10, 19, 24]
				}
			]
		});


		var myChart2 = echarts.init(document.getElementById('chart2'));
		var data=getData();
		myChart2.setOption({
			legend:{
				type:'scroll',
				data:data.legendData,
				selected:data.selected,

				scrollDataIndex:6,
				pageButtonItemGap:30,
				pageButtonGap:40,
				pageButtonPosition:'start',

				pageFormatter:'{current}/{total}',
				pageFormatter:function(obj){
					//console.log(obj);
					return obj.current+'--'+obj.total;
					/* return {
						current: 3,
    					total: 6
					} */
				},
				orient:'vertical',
				left:"right",
				pageIcons:{
					horizontal:[
					'image://',
					'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
					]
				},
				pageIconColor:'red',
				pageIconInactiveColor:'green',
				pageIconSize:[50, 80],
				pageTextStyle:{
					color: 'teal',
				},
				animation:true,
				animationDurationUpdate:1500,
			},
			series:[
				{
					name:'姓名',
					type:'pie',
					data:data.seriesData,
				}
			]
		});

		//console.log(getData());
		function getData() {
			var nameList = [
				'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
			];

			var legendData=[];	//图例数据		['和穆','屈项','梁祁',....]
			var seriesData=[];	//系列数据		[{name:'和穆',value:20298}...]
			var selected={};	//选中的图例	{'和穆': true,'屈项':false}

			nameList.sort(function(){
				return Math.random()-0.5;
			});

			for(var i=0;i<50;i++){
				var makeUpName=nameList[0]+nameList[1];	//拼成的数据

				legendData.push(makeUpName);
				seriesData.push({
					name:makeUpName,
					value:Math.round(Math.random()*100000)
				});
				selected[makeUpName]=i<6;	//让前6个显示，其余的都不显示

				//把已经获取到的两个数据从原数组里面删除掉
				nameList.shift();
				nameList.shift();
			}

			//console.log(selected);

			return {
				legendData:legendData,
				seriesData:seriesData,
				selected:selected
			}
		};
	</script>
</body>

</html>